<!-- transform-origin 实现线条运动方向
transform-origin 让我们可以更改一个元素变形（transform）的原点，transform-origin 属性可以使用一个，两个或三个值来指定，其中每个值都表示一个偏移量。 没有明确定义的偏移将重置为其对应的初始值。
本效果最最最重要的地方就在于这里，我们使用 transform-origin 去改变 transform: scale() 的原点实现线条运动的方向。
1.我们给线条设置一个默认的 transform-origin 记为状态1
2.hover 的时候，设置另外一个不同的 transform-origin, 记为状态2
所以，当然我们 hover 的时候，会读取状态2的transform-origin，从该原点开始放大至 scaleX(1)，hover 离开的时候，会读取状态1的transform-origin，从scaleX(1)状态缩小至该原点。 -->

<style>
  body {
    padding: 50px;
  }

  div {
    position: absolute;
    width: 200px;
    height: 60px;
    line-height: 60px;
    font-size: 32px;
    cursor: pointer;
    color: #333;
    text-align: center;
    transition: color .5s;
    margin: 20px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  div::before {
    content: "";
    position: absolute;
    left: 0%;
    bottom: 0;
    width: 200px;
    transform: scaleX(0);
    height: 2px;
    background: deeppink;
    z-index: -1;
    transition: all .5s;
  }

  div:hover::before {
    transform: scaleX(1);
  }
</style>

<div>Hover Me</div>